<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.supName || '' }}</view>
          <view class="cname-fu-box">
            <view class="cname-fu">
              <view class="gs">{{ itemList.proName }}</view>
            </view>
            <view class="line"></view>
            <view class="cname-fu">
              <view class="mz">{{ itemList.carBrand }}</view>
            </view>
          </view>
        </view>
        <view class="status" :class="{
            'gray-type': itemList.status == 9 || itemList.status == 8,
            'orange-type': itemList.status == 0 || itemList.status == 1,
            'blue-type': itemList.status >= 2 && itemList.status <= 6,
            'green-type': itemList.status == 7,
            'red-type': itemList.status == 10
          }">
          {{ statusName[itemList.status] }}</view>
      </view>
      <view class="bottom" style="margin-top: 20rpx">
        <view class="items">
          <text class="til">订单来源</text>
          <text class="val">{{ orderListName[itemList.orderSource] }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">司机电话</text>
          <text class="val">{{ itemList.carPhone }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">司机姓名</text>
          <text class="val">{{ itemList.carName }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">身份证号</text>
          <text class="val">{{
            itemList.carCard.slice(0, 3) + '***' + itemList.carCard.slice(-3)
            }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">净重</text>
          <text class="val">{{ itemList.totalWeight || '-' }}吨</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til" style="width: 100px">磅单时间</text>
          <text class="val">{{ itemList.billboardTime }}</text>
        </view>
      </view>
      <view class="bottom" style="padding-bottom: 0; height: 218rpx">
        <view class="items" style="position: relative">
          <text class="til">磅单</text>
          <view class="img-box">
            <image class="cover-img" :src="itemList.fileUuid" @click.stop="clickImg" mode="aspectFill"></image>
          </view>
        </view>
      </view>
      <view class="button-wrapper">
        <view class="bottom-btn" v-if="
            statusName[itemList.status] == '挂起' ||
            statusName[itemList.status] == '待确认' ||
            statusName[itemList.status] == '待称毛' ||
            statusName[itemList.status] == '待录皮' ||
            statusName[itemList.status] == '待出厂'
          ">
          <button v-if="
              orderSuspend &&
              (statusName[itemList.status] == '待确认' ||
                statusName[itemList.status] == '待称毛' ||
                statusName[itemList.status] == '待录皮' ||
                statusName[itemList.status] == '待出厂')
            " class="cancelBtn small" size="mini" @click.stop="confirmSuspend(itemList)">
            挂起
          </button>

          <button class="cancelBtn small" size="mini" v-if="statusName[itemList.status] == '挂起'"
            @click.stop="confirmRecovery(itemList)">
            恢复
          </button>

          <button v-if="statusName[itemList.status] == '待确认1'" class="cancelBtn small" size="mini"
            @click.stop="confirmReceipt(itemList)">
            确认收货
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'row-number',
    props: {
      itemList: {
        type: Object,
        default: {
          vehicleNo: '',
          driverName: '',
          queueStatusName: '',
          customerName: '',
          coalSubtypeName: '',
          loadingSiteName: '',
          queueTime: '',
          callNumberTime: ''
        }
      },
      orderSuspend: false
    },
    computed: {
      showFlag() {
        let flag = false;
        switch (this.statusName[this.itemList.status]) {
          case '挂起':
            flag = true;
            break;
          case '待确认':
            flag = true;
            break;
          case '待称毛':
            flag = true;
            break;
          case '待录皮':
            flag = true;
            break;
          case '待出厂':
            flag = true;
            break;
          default:
            break;
        }
        return flag;
      }
    },
    data() {
      return {
        statusName: {
          0: '待供应商审核',
          1: '待采购方审核',
          2: '待入场',
          3: '待称毛',
          4: '待确认',
          5: '待录皮',
          6: '待出厂',
          7: '已完成',
          8: '已作废',
          9: '已终止',
          10: '挂起'
        },
        orderListName: {
          0: '扫供货商的二维码',
          1: '扫采购方的二维码',
          2: '销售自动生成采购订单'
        }
      };
    },
    methods: {
      handleClick(item, type) {
        console.log(item);
        this.$emit('manualCalling', item, type);
      },
      confirmReceipt(item) {
        this.$modal.confirm('确认收货后，司机将前往空磅称皮').then(() => {
          this.$emit('showButton', item);
        });
      },
      confirmSuspend(item) {
        this.$emit('guaqiFun', item);
      },
      confirmRecovery(item) {
        this.$emit('huifuFun', item);
      },
      clickImg() {
        uni.previewImage({
          urls: [this.itemList.fileUuid]
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .top .status {
    min-width: 58px;
    margin-left: 10px;
  }

  .button-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .bottom-btn {
    text-align: right;
    border-top: 1px solid #e8e7e7;
    padding-top: 10px;
    margin-left: 10px;
    width: 100%;

    button {
      margin-left: 10rpx;
    }
  }
</style>